<template>
	<div class="app">
		<div>
			<h3 class="title"><span style="color: green;">统计数据管理/</span>省分组分项检查统计</h3>
		</div>
		<div class="sideTitle">
			<h3 class="title1">省分组分项检查统计</h3>
		</div>
		<el-scrollbar  class="scrollbar" max-height="500px">
		    <el-table :data="backdata" :row-style="tableRowStyle" style="width: 100%" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}"s>
		        <el-table-column prop="province_id" label="省编号" width="150" />
		    	<el-table-column prop="province_abbr" label="省简称" width="150" />
		    	<el-table-column prop="province_name" label="省名称" width="315" />
		    	<el-table-column prop="SO2_count" label="SO2超标累计" width="180"/>
		    	<el-table-column prop="CO_count" label="CO超标累计" width="180"/>
				<el-table-column prop="PM_count" label="PM2.5超标累计" width="180"/>
				<el-table-column prop="AQI_count" label="AQI超标累计" width="180"/>
		    </el-table>
		</el-scrollbar>
	</div>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive } from 'vue';
	let backdata = reactive([])
	let getProvinceStatistics = function(){
		axios.get("http://localhost:7000/service-nepm/administrator/getProvinceMesg").then(res=>{
			ElMessage.success("省分组分项检查数据统计成功");
			backdata.splice(0,backdata.length,...res.data);console.log(backdata)})
	}
	onMounted(()=>{
		getProvinceStatistics()
	})
	const tableRowStyle = (row) => {
    return row.rowIndex % 2 === 0 ? 
        { background: '#ffffff' } : 
        { background: '#C8F3E9' }; // 浅绿色
};
</script>

<style scoped>
	.app{
		width: 100%;
	}
	.title{
		font-size: 15px;
	}
	.title1{
		margin-left: 50px;
		font-size: 15px;
		color: white;
	}
	.sideTitle{
		width: 80%;
		height: 5%;
		background-color: #078767;
		margin-bottom: 2%;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.scrollbar{
		height: 70%;
		width: 80%;
	}
</style>